<!-- 账号申请 -->
<template>
  <el-card>
    <template #header>
      <div>
        <span>账号申请</span>
      </div>
    </template>

    <!-- 搜索表单 -->
    <el-form class="w-[25rem]">
      <el-form-item label="审核状态：">
        <el-select placeholder="请选择" v-model="queryParams.type" clearable>
          <el-option label="已审核" :value="1"></el-option>
          <el-option label="待审核" :value="2"></el-option>
        </el-select>
      </el-form-item>
    </el-form>

    <!-- 审核列表 -->
    <el-table :data="userlist" style="width: 100%">
      <el-table-column label="姓名" prop="name" align="center"></el-table-column>
      <el-table-column label="身份证号" prop="parentCardId" align="center"> </el-table-column>
      <el-table-column label="手机号" prop="parentPhone" align="center"> </el-table-column>
      <el-table-column label="性别" prop="sex" align="center"> </el-table-column>
      <el-table-column label="状态" prop="status" align="center">
        <template #default="{ row }">
          <el-tag v-if="row.status === 1" type="info">已审核</el-tag>
          <el-tag v-if="row.status === 2" type="success">待审核</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="申请时间" prop="updateTime" align="center">
        <template #default="{ row }">
          {{ dayjs(row.updateTime).format("YYYY-MM-DD") }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" fixed="right">
        <template #default="{ row }">
          <el-button
            icon="Search"
            circle
            plain
            type="success"
            @click="lookApplyId(row)"
          ></el-button>
          <el-button circle plain v-if="row.status === 2" type="primary" @click="acceptApplyId(row)"
            >yes</el-button
          >
          <el-button
            icon="Delete"
            circle
            plain
            type="danger"
            v-if="row.status === 2"
            @click="deleteApplyId(row)"
          ></el-button>
        </template>
      </el-table-column>
      <template #empty>
        <el-empty description="没有数据" />
      </template>
    </el-table>

    <!-- 分页条 -->
    <el-pagination
      v-show="total > 0"
      v-model:current-page="queryParams.pageNum"
      v-model:page-size="queryParams.pageSize"
      :page-sizes="[3, 5, 10, 15]"
      layout="jumper, total, sizes, prev, pager, next"
      background
      :total="total"
      @size-change="onSizeChange"
      @current-change="onCurrentChange"
      style="margin-top: 20px; justify-content: flex-end"
    />
  </el-card>

  <lookApply ref="lookApplyRef" @getInfo="getAccountApply"></lookApply>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, watch } from "vue";
import { accountApply, accountApplyStatus, accountApplyDelete } from "@/api/account";
import lookApply from "@/views/systemAccount/component/lookApply.vue";
import message from "@/composable/ElMessage";
import { ElMessageBox } from "element-plus";
import dayjs from "dayjs";

const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  type: 2,
});

// 获取账号审核列表
const userlist = reactive<any[]>([]);
const total = ref(0);

const getAccountApply = async () => {
  const { data } = await accountApply(queryParams.type);
  // console.log(data);
  userlist.length = 0;
  userlist.push(...data);
  total.value = data.length;
};

watch(
  () => queryParams.type,
  () => {
    getAccountApply();
  }
);

// 查看申请
const lookApplyRef = ref();
const lookApplyId = (row: any) => {
  // console.log(row);
  const title = "查看申请信息";
  lookApplyRef.value.open(title, row);
};

// 同意申请
const acceptApplyId = async (row: any) => {
  let query = {
    id: row.id,
    status: 1,
  };
  await accountApplyStatus(query).then((res: any) => {
    if (res.code === "200") {
      message.success("审核成功");
      getAccountApply();
    }
  });
};

// 删除申请
const deleteApplyId = async (row: any) => {
  ElMessageBox.confirm("确定删除该账号吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      await accountApplyDelete(row.id).then((res: any) => {
        if (res.code === "200") {
          getAccountApply();
          message.success("删除成功");
        }
      });
    })
    .catch(() => {
      message.info("取消删除");
    });
};

// 条数变化
const onSizeChange = (size: any) => {
  queryParams.pageSize = size;
};
// 页数变化
const onCurrentChange = (num: any) => {
  queryParams.pageNum = num;
};

onMounted(() => {
  getAccountApply();
});
</script>

<style lang="scss" scoped></style>
